import classNames from 'classnames';
function Item({ name, isPacked }) {
  const itemContent = isPacked ? <del>{name + ' ✔'}</del> : name;
  return <li className="item">{itemContent}</li>;
}

export default function PackingList(props) {
  console.log(props);
  return (
    <section className={classNames(props.className, 'aaa', 'bbb')}>
      <h1>Sally Ride 的行李清单</h1>
      <ul>
        <Item isPacked={true} name="宇航服" />
        <Item isPacked={true} name="带金箔的头盔" />
        <Item isPacked={false} name="Tam 的照片" />
      </ul>
    </section>
  );
}
